<template>
	<view class="popupBox" :style="{height:props.height,top:props.top}">
		<view class="popup-metro row">
			<view class="leftNav">
				<view class="nav" @click="intSub">不限</view>
				<view class="nav" :class="curSubId==item.id?'active':''" v-for="(item,i) in subList" :key="i" @click="changeSub(item)">{{item.name}}</view>
			</view>
			<view class="rightNav fill">
				<view class="nav" :class="curSiteId==item.id?'active':''" v-for="(item,i) in siteList" :key="'site'+i" @click="changeSite(item)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { metroRoute, metroSite } from '@/common/API/room'
const emit = defineEmits(['changeSub'])
const props = defineProps({
	height: {
		type: String,
		default: () => ''
	},
	top: {
		type: String,
		default: () => ''
	}
})
const curSubId = ref()
const curSiteId = ref()
const subList = ref<any>([])
const siteList = ref<any>([])
onMounted(() => {
	getSubList()
})

const getSubList = async ()=>{
	subList.value = await metroRoute({})
	if(subList.value.length){
		curSubId.value = subList.value[0].id
		getSiteList(curSubId.value)
	}
}

const getSiteList = async (id)=>{
	siteList.value = await metroSite({
		id: id
	})
}

const changeSub = (item)=>{
	curSubId.value = item.id
	getSiteList(curSubId.value)
}

const intSub = ()=>{
	emit('changeSub',{
		'lat': "",
		'lon': "",
		'name': "不限"
	})
}

const changeSite = (item)=>{
	curSiteId.value = item.id
	emit('changeSub',item)
}
</script>

<style lang="scss" scoped>
.popupBox{
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	.mask{
		width: 100%;
		height: 100%;
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.4);
		transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
		transform-origin: 50% 50%;
		position: fixed;
		z-index: 9;
	}
}
.popup-metro{
	background: #fff;
	position: relative;
	z-index: 99;
	height: 100%;
	/* #ifdef H5 */
	padding-top: 88rpx;
	/* #endif */
	align-items: stretch;
	.leftNav{
		background: #F5F5F5;
		width: 224rpx;
		.nav{
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			&.active{
				background: #fff;
			}
		}
	}
	.rightNav{
		overflow-y: scroll;
		padding-bottom: 220rpx;
		.nav{
			padding: 0 72rpx;
			color: #666;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 26rpx;
			&.active{
				color: $uni-color-primary;
			}
		}
	}
}
</style>